<template>
    <div></div>
</template>

<script>
// 导入map系列的辅助方法
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
    mounted() {
        // 语法1：通过this.$store对象进行获取/调用
        console.log(this.$store);
        // 获取state的数据
        // 获取语法：this.$store.state.空间名.数据名
        console.log(this.$store.state.user.uid);
        console.log(this.$store.state.global.isLogin);
        // 修改语法（同步）：
        // 同步修改语法：this.$store.commit("空间名/方法名",载荷);
        this.$store.commit("user/set", 123);
        // 修改语法（异步）：
        // 同步修改语法：this.$store.dispatch("空间名/方法名",载荷);
        this.$store.dispatch("user/setAsync", 456);
        // 处理：注意点【与其它的语法格格不入】
        // 语法：this.$store.getters["控件名/属性名"]
        console.log(this.$store.getters["user/dealUid"]);

        // 语法2：通过map系列函数进行映射获取/调用
        // 获取
        console.log(this.uid);
        console.log(this.uname);
        // 设置（同步）
        // this.set(000);  // 该方法由于命名原因，无法执行
        // 设置（异步）
        this.setAsync(111);
        // 数据处理
        console.log(this.dealUid);
    },
    // 计算属性
    computed: {
        // 模块化之后的语法需要变成：
        // ...mapXxxxx(空间名,[xxx,yyy])
        ...mapState("user", ["uid", "uname"]),
        ...mapGetters("user", ["dealUid"]),
    },
    methods: {
        ...mapMutations("user", ["set"]),
        ...mapActions("user", ["setAsync"]),
    },
};
</script>

<style></style>
